<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的红包列表</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript">
        function closeWin(){
          // 上页面刷新数据
          var refreshUser = 'gotoUser();';
          api.execScript({
            name: 'home',
            script: refreshUser,
        });

          // 关闭页面
          api.closeToWin({
            name: 'home'
        });
      };
  </script>
</head>
<body>
    <!-- 头部 -->
    <header class="aui-bar aui-bar-nav pos" id="topbar">
        <a class="aui-pull-left aui-btn" onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">我的红包</div>
    </header>
    <div class="header-d"></div>
    <div class="red-packet-list-t">
        <ul>
            <li id="notUse" class="active" onclick="notUse();">未使用</li>
            <li id="alreadyUse" onclick="alreadyUse();">已使用</li>
            <li id="expireUse" onclick="expireUse();">已过期</li>
        </ul>
    </div>
    <div id="list">
        <div class="red-packet-list">
            <ul class="red-packet-list-y">
                <li tapmode onclick="">
                    <div class="aui-col-xs-5">
                        额度加息券(年化)
                        <p>0.00%</p>
                    </div>
                    <div class="aui-col-xs-6">
                        <!--                         <p>最低需投0.00元</p> -->
                        <p>有效期至0000-00-00 00:00:00</p>
                        <p>可适用于0个月及以上项目</p>
                    </div>
                    <div class="aui-col-xs-1">
                        <span class="fa fa-angle-right"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <img src="image/red-packet-list-d.png" style="width:100%;">
</body>
<script type="text/template" id="template">
    {{~it:value:index}}
    <div class="red-packet-list">
        <ul class="red-packet-list-y">
            <li tapmode>
                <div class="red-packet-list-1">
                    <div class="aui-col-xs-6">
                        红包类型:{{? value.ecv_type_id == 9 }}
                        注册红包
                        {{?? value.ecv_type_id == 10}}
                        投资红包
                        {{?? value.ecv_type_id == 297}}
                        资金托管红包
                        {{?? value.ecv_type_id == 298}}
                        奖励红包
                        {{?? value.ecv_type_id == 301}}
                        充值红包
                        {{?? value.ecv_type_id == 362}}
                        绑卡红包
                        {{?? value.ecv_type_id == 363}}
                        哈尔滨银行绑卡红包
                        {{?}}
                        <p class="red">红包金额:{{=value.money}}</p>
                    </div>
                    <div class="aui-col-xs-5">
                        <p>已用次数:{{=value.use_count}}</p>
                        <p>可用次数:{{=value.use_limit}}</p>
                    </div>
                </div>
                <div class="red-packet-list-2">
                    <p>开始时间:{{=value.begin_time}}</p>
                    <p>有效期至:{{=value.end_time}}</p>
                    <p>
                        {{? value.use_count==0}}
                        <!--                        未使用 -->
                        <div onclick="change_integral({{=value.id}},{{=value.money}});">兑换积分</div>
                        {{??}}
                        已使用说明:
                        {{=value.use_content}}
                        {{?}}
                    </p>
                </div>
            </li>

        </ul>
    </div>
    {{~}}
</script>
<script type="text/javascript">

    apiready = function(){
        showProgress();
        updateData(0,0);
        // pullRefresh();
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            closeWin();
        });
    }

    // 请求数据
    function updateData(reward,type){
        var userid = $api.getStorage('userid');
        rewardVal = reward;
        typeVal = type;
        api.ajax({
            url: webAddress + '/index.php?ctl=app_user_center&act=rewardlist',
            method: 'post',
            data: {
                values: { 
                    id: userid,
                    type: type,
                    reward: reward,
                },
            }
        },function(ret, err){
            if (ret) {
                // 关闭下拉刷新控件
                // api.refreshHeaderLoadDone();
                // 关闭加载状态控件
                api.hideProgress();
                if (ret.status == 0) {
                    alert(ret.info);
                    return false;
                }else{
                    var data = ret.reward;
                    // alert($api.jsonToStr(data));
                    $api.setStorage('red_packet', data);
                    if (data == '') {
                        if (type == 0) {
                            var list = $api.byId('list');
                            list.innerHTML = '<div class="login-list-no">没有未使用的红包</div>';
                        }else if(type == 1){
                            var list = $api.byId('list');
                            list.innerHTML = '<div class="login-list-no">没有已使用的红包</div>';
                        }else{
                            var list = $api.byId('list');
                            list.innerHTML = '<div class="login-list-no">没有已过期的红包</div>';
                        }
                    }else{
                        templateFun(data);
                    }
                }
            } else {
                alert(err.msg);
                // 关闭下拉刷新控件
                // api.refreshHeaderLoadDone();
                // 关闭加载状态控件
                api.hideProgress();
            }
        });
    }

    // 模板赋值函数
    function templateFun(data){
        if (data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].end_time == 0) {
                    data[i].end_time = " 无期限";
                }else{
                    data[i].end_time = getDate(data[i].end_time);
                }
                if (data[i].begin_time == 0) {
                    data[i].begin_time = " 未知";
                }else{
                  data[i].begin_time = getDate(data[i].begin_time);
              }
              data[i].money = outputmoney(data[i].money);     
          }
          var template = $api.byId('template');
          var dotFn = doT.template(template.innerHTML);
          var html = dotFn(data);
          var user = $api.byId('list');
          $api.html(user, html);
      }else{
        var template = $api.byId('tempTemplate');
        var dotFn = doT.template(template.innerHTML);
        var html = dotFn(data);
        var user = $api.byId('list');
        $api.html(user, html);
    }
}

    // 未使用
    function notUse(){
        showProgress();
        updateData(0,0);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(alreadyUse, 'active');
        $api.removeCls(expireUse, 'active');
        $api.addCls(notUse, 'active');        
    }

    // 已使用
    function alreadyUse(){
        showProgress();
        updateData(0,1);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(notUse, 'active');
        $api.removeCls(expireUse, 'active');
        $api.addCls(alreadyUse, 'active');    
    }

    // 已过期
    function expireUse(){
        showProgress();
        updateData(0,2);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(notUse, 'active');
        $api.removeCls(alreadyUse, 'active');
        $api.addCls(expireUse, 'active');    
    }

    // 下拉刷新
    function pullRefresh(){
        api.setRefreshHeaderInfo({
            // loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            updateData(rewardVal,typeVal);
        });
    }

    // 加载状态控件
    function showProgress(){
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '请稍后...',
            modal: false
        });
    }

    // 红包兑换积分
    function change_integral(id,money){
        var score = Math.round(money/10);
        api.confirm({
            title: '提示',
            msg: '是否兑换'+score+'积分?',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret ){
                var index = ret.buttonIndex;
                if (index == 1) {
                    change_to_score(id,score);
                }
            }else{
             alert( JSON.stringify( err ) );
         }
     });
    }

    // 访问兑换接口
    function change_to_score(id,score){

        var userid = $api.getStorage('userid');
        api.ajax({
            url: webAddress + '/index.php?ctl=uc_voucher&act=change_to_score',
            method: 'post',
            data: {
                values: { 
                    id: userid,
                    red_packet_id: id,
                    score: score,
                },
            }
        },function(ret, err){
            if (ret) {
                if (ret.status == 0) {
                    alert(ret.info);
                    return false;
                } else {
                    api.toast({
                        msg: '兑换成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    // var data = ret.info.list;
                    // templateFun(data);
                    updateData(0,0);
                }
            } else {
                alert( JSON.stringify( err ) );
            }
        });
    }
</script>
</html>